<template>
  <view class="run-order-wrap">
    <view class="header">
      <!-- tab 切换 -->
      <view class="tab-box">
        <u-tabs
          :list="classOrderList"
          :current="current"
          :fontSize="28"
          :isScroll="false"
          bgColor="#ffffff"
          inactiveColor="#999999"
          @change="handleTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        ></u-tabs>
      </view>
    </view>

    <view class="list">
      <view class="item" v-for="(item, index) in items" :key="index" @tap="handleToDetail(item)">
      <!-- <view class="item" v-for="(item, index) in items" :key="index"> -->
        <view class="merber">
          <view class="merber__time">
            {{ item.created_at }}
          </view>
          <view class="status"  >
            {{ item.status | statusValueFilter }}
          </view>
        </view>
        <view class="info">
          <div class="go-box" >
            <div class="go-icon" >取</div>
            <div class="go-address" >
              {{ item.branch_name }}
            </div>
          </div>
          <div class="go-box" >
            <div class="go-icon red" >收</div>
            <div class="go-address" >
              {{ item.region.substring(item.region.lastIndexOf(' '))+item.address }}
            </div>
          </div>
          <div class="pay-box" >
            <span class="pay-box__label" >取件码  : </span>
            <span class="pay-box__value" >{{ item.pick_up_code }}</span>
            <span class="pay-box__label" style="margin-left:100rpx">收件人：  : </span>
            <span class="pay-box__value"  >{{ item.pick_up_name+'('+item.pick_up_phone+')' }}</span>
          </div>
          <!-- 支付金额 -->
          <div class="pay-box" >
            <span class="pay-box__label" >实付金额: </span>
            <span class="pay-box__value" >¥{{ item.price / 100 }}</span>
          </div>
        </view>
      </view>
      <view class="full-green" v-if="!isEmpty">
        <load-more :status="loadingStatus"></load-more>
      </view>
      <view v-else>
        <u-empty description="暂无订单～"></u-empty>
      </view>
    </view>


     <view class="btn-box">
       <button
         class="pp-button cancel-btn"
         hover-class="pp-button--active"
         @tap="handleToPublish"
       >
         发布跑腿
       </button>
     </view>

  </view>
</template>

<script>
import loadMore from '@/components/load-more.vue';
import uEmpty from '@/basic-components/u-empty/index.vue';
import uTabs from '@/basic-components/u-tabs/index.vue';
import countDown from '@/basic-components/u-count-down/index.vue';
import { momentDate } from '@/tool';
import { ORDER_LIST } from '@/api/order';

import moreLoadMixins from '@/common/load-more';

import { MY_RUN } from '@/api/run';

export default {
  components: {
    loadMore,
    uEmpty,
    uTabs,
    countDown
  },
  mixins: [moreLoadMixins],
  data() {
    return {
      // tab切换
      current: 0,
      classOrderList: [{
        name: '全部'
      },{
        name: '已发起'
      },{
        name: '进行中'
      },{
        name: '已完成'
      },{
        name: '已取消'
      }],

    };
  },
  async onShow() {

    // 列表信息
    this.resetInit();
  },
  async onPullDownRefresh() {
    // 初始化
    await this.resetInit();
    uni.stopPullDownRefresh();
  },
  filters: {
    statusValueFilter(val) {
      const statusObj = {
        0: '未支付',
        1: '已发起',
        2: '进行中',
        3: '已完成',
        4: '已取消'
      }

      return statusObj[val]
    }
  },
  methods: {
    handleToPublish() {
      const regionId = uni.getStorageSync('regionId');
      if (!regionId) {
         uni.showToast({
           title: '请先绑定区域，才能发布拼车',
           icon: 'none',
         });
        return;
      }
      this.$navigate({
        page: 'runPublish'
        
      })
    },
    handleToDetail(item) {
      this.$navigate({
        page: 'runOrderDetail',
        params: {
          item:  JSON.stringify(item)
        },
      });
    },
    handleTabChange(index) {
      if(this.current === index) {
        return
      }
      this.current = index;
      this.resetInit();
    },
    endTime() {
      this.resetInit();
    },
    initData() {
      // 列表搜索
      const params = {};
      params.page = this.pages.currentPage;
      params.per_page = this.pages.perPage;
      params.order_type=2
      if(this.current) {
         const statusInt = {
           1: 1,
           2: 2,
           3: 3,
           4: 4
         }
         params.status = statusInt[this.current];
      }
      
      return this.$http.get(ORDER_LIST, params).then(res => {
        const { data, last_page, current_page, total } = res;

        if (data && data.length) {

          data.forEach(item => {
            item.created_at = momentDate(item.created_at);
            if(item.start_time) {
              item.start_time = momentDate(item.start_time);
            }
            if(item.end_time) {
              item.end_time = momentDate(item.end_time);
            }

          });

          this.items = this.items.concat(data);
          this.pages.currentPage=current_page+1;
        }
        return {
          perPage: this.pages.perPage,
          currentPage: this.pages.currentPage,
          hasNext: !last_page === current_page,
          empty: current_page === 1 && total === 0,
        };
      });
    },
  },
};
</script>

<style lang="less">
.run-order-wrap {
  padding-bottom: 150rpx;
  padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 118rpx;
    padding-top: 24rpx;
    background: #fff;
  }
  .tab-box{
    width: 100%;
    background-color: #FFFFFF;
  }
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 136rpx;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    .item {
      position: relative;
      width: 710rpx;
      padding: 24rpx;
      padding-bottom: 0;
      margin: auto;
      margin-bottom: 20rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      .merber {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__time{
          font-size: 28rpx;
          color: #999999;
        }
        .status{
          font-size: 28rpx;
          flex-shrink: 0;
          margin-right: 10rpx;
          color: #FF6034;
        }
      }
      .info {
        padding: 20rpx 0;
        .go-box{
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .go-icon{
            width: 66rpx;
            height: 66rpx;
            margin-right: 10px;
            text-align: center;
            line-height: 66rpx;
            font-size: 28rpx;
            flex-shrink: 0;
            color: #FFFFFF;
            border-radius: 50%;
            background-color: #000000;
            &.red{
              background-color: red;
            }
          }

        }
      }
    }
  }
  .pay-box{
    padding-top: 20rpx;
    border-top: 1px solid #EEEEEE;
    &__label{
      font-size: 28rpx;
      font-weight: bold;
      margin-right: 20rpx;
    }
    &__value{
      color: red;
      font-weight: bold;
    }
  }
  .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 136rpx;
    .cancel-btn {
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      background-color: #fedd00;
    }
  }
}
</style>
